<template>
  <div class="container">
    <div class="mainContent">
      <div class="headers">
        <div class="topHeader">
          <div class="title">问题咨询</div>
          <div class="rightEnter" @click="handleIntoMyQuestion">
          <!-- <div class="rightEnter" @click="showToast"> -->
            <div class="myQuestion">我的问题</div>
            <img src="/static/images/question.png" alt="">
          </div>
        </div>
        <!-- <div class="describe">请选择您的反馈问题类型（必选）</div> -->
      </div>
      <div class="choType">
        <div :class="['typeItem', choType === 1 ? 'hasChoose' : '']" @click="handleChoType(1)">培训课咨询</div>
        <!-- <div :class="['typeItem', choType === 2 ? 'hasChoose' : '']" @click="handleChoType(2)">合作咨询</div> -->
      </div>
      <div class="writeTextArea">
        <textarea class='textbox' cols="30" rows="10" v-model="feedbackText" maxlength="400" placeholder="说点什么吧..." placeholder-style="color: #999;" ></textarea>
        <div class="numTotal">{{ feedbackText.length }}/400</div>
      </div>
      <div class="submitBtn" @click="handleSubmitFeedback">提交反馈</div>
      <div class="otherServiceArea">
        <div class="singleService" @click="handleCallPhone">
          <div class="left">
            <div class="image service"></div>
            <div class="content">
              <div class="topTitle">您的专属客服</div>
              <div class="bottomDescribe">升学在线期待和您的沟通</div>
            </div>
          </div>
          <div class="right"></div>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      choType: 1,
      feedbackText: '',
      actionSheetList: ['专家 (027)86161985'],
      isSubmitPromise: false,
      isCanClick: true
    }
  },
  mounted () {
    const loginOrNot = wx.getStorageSync('tokens')
    if (!loginOrNot) {
      this.gourlLogin()
    }
    wx.showShareMenu()
    this.feedbackText = ''
    this.actionSheetList = ['专家 (027)86161985']
    this.getPersonPhone()
  },
  watch: {
    feedbackText (str) {
      if (str === '') {
        this.isSubmitPromise = false
      } else {
        this.isSubmitPromise = true
      }
    }
  },
  methods: {
    gourlLogin () {
      wx.reLaunch({ url: '../login/main' })
    },
    // 我的问题
    handleIntoMyQuestion () {
      if (this.isCanClick) {
        wx.navigateTo({ url: '../myQuestion/main' })
      }
    },
    // 敬请期待
    showToast () {
      wx.showToast({
        title: '敬请期待~',
        icon: 'none'
      })
    },
    // 拨打电话
    handleCallPhone () {
      const that = this
      wx.showActionSheet({
        itemList: that.actionSheetList,
        success (res) {
          const index = res.tapIndex
          let phone = that.actionSheetList[index].split(' ')[1]
          wx.makePhoneCall({
            phoneNumber: phone
          })
        },
        fail (res) {
          console.log(res.errMsg)
        }
      })
    },
    handleChoType (type) {
      this.choType = type
    },
    // 提交反馈
    handleSubmitFeedback () {
      if (this.feedbackText === '') {
        wx.showToast({
          title: '请填写反馈信息',
          icon: 'none'
        })
      } else {
        if (this.isSubmitPromise) {
          this.isSubmitPromise = false
          this.isCanClick = false
          const data = JSON.parse(wx.getStorageSync('teacherData'))
          this.$httpWX.post({
            url: '/academy/teacher/addFeedback',
            data: {
              content: this.feedbackText,
              type: '培训课咨询',
              userType: data.userType
            },
            header: {
              'content-type': 'application/json', // 默认值
              'accessToken': wx.getStorageSync('tokens')
            }
          }).then(res => {
            if (res.code === '0') {
              this.feedbackText = ''
              this.choType = 1
              wx.showToast({
                title: '提交成功',
                icon: 'success'
              })
              wx.reLaunch({ url: '../index/main' })
            } else {
              wx.showToast({
                title: '提交失败',
                icon: 'none'
              })
            }
            this.isCanClick = true
          })
        }
      }
    },
    // 获取业务员电话
    getPersonPhone () {
      this.$httpWX.post({
        url: '/academy/teacher/getPhone',
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        if (res.data) {
          let str = '合作 ' + res.data.telephone
          this.actionSheetList.unshift(str)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    padding: 0 30rpx 100rpx;
    box-sizing: border-box;
    .headers {
      width: 100%;
      padding-top: 30rpx;
      margin-bottom: 80rpx;
      .topHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 36rpx;
        padding-right: 10rpx;
        .title {
          color: #171717;
          font-size: 40rpx;
          font-weight: bold;
        }
        .rightEnter {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .myQuestion {
            color: #999;
            font-size: 26rpx;
            margin-right: 5rpx;
          }
          img {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
      .describe {
        color: #999;
        font-size: 24rpx;
      }
    }
    .choType {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 40rpx;
      .typeItem {
        width: 200rpx;
        height: 50rpx;
        line-height: 48rpx;
        text-align: center;
        border-radius: 25rpx;
        color: #999;
        font-size: 28rpx;
        border: 1rpx solid #E6E6E6;
        box-sizing: border-box;
        margin-right: 30rpx;
      }
      .hasChoose {
        color: #fff;
        background: #FFAD0D;
        border-color: #FFAD0D;
      }
    }
    .writeTextArea {
      width: 100%;
      height: 448rpx;
      border: 1rpx solid #DCDCDC;
      border-radius: 5rpx;
      padding: 26rpx 22rpx 18rpx;
      margin-bottom: 60rpx;
      box-sizing: border-box;
      textArea {
        color: #171717;
        font-size: 24rpx;
        margin-bottom: 18rpx;
        width:100%;
      }
      .numTotal {
        text-align: right;
        color: #999;
        font-size: 24rpx;
      }
    }
    .submitBtn {
      width: 300rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #FFAD0D;
      color: #fff;
      font-size: 30rpx;
      margin: 0 auto 63rpx;
      border-radius: 40rpx;
    }
    .otherServiceArea {
      .singleService {
        width: 100%;
        height: 150rpx;
        border: 1rpx solid #E5E5E5;
        border-radius: 5rpx;
        padding: 0 20rpx 0 22rpx;
        margin-bottom: 26rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .image {
            width: 100rpx;
            height: 100rpx;
            margin-right: 47rpx;
          }
          .service {
            background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1870rpx -1885rpx;
            background-size: 746rpx 350rpx;
          }
          .website {
            background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1750rpx -1885rpx;
            background-size: 746rpx 350rpx;
          }
          .content {
            padding-top: 19rpx;
            .topTitle {
              color: #1C1B1B;
              font-size: 34rpx;
              font-weight: bold;
              margin-bottom: 18rpx;
            }
            .bottomDescribe {
              color: #999;
              font-size: 22rpx;
            }
          }
        }
        .right {
          width: 36rpx;
          height: 36rpx;
          background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1170rpx -2011rpx;
          background-size: 746rpx 350rpx;
        }
      }
    }
  }
</style>
